<template>
    <prize-table
        :type="props.type"
        @openAddReward="openAddReward"
        @editReward="editReward"
        @delReward="delReward"
        @viewReward="viewReward"></prize-table>
    <prize-from-dialog
        ref="prizeFromDialogRef"
        :type="props.type"
        :form-disabled="props.formDisabled"
        :period-type="props.periodType"
        :activity-time="props.activityTime"
        @submit="handleSubmitPrize" />
</template>
<script setup lang="ts">
import PrizeTable from './components/prize-table.vue';
import prizeFromDialog from './components/prize-from-dialog/prize-from-dialog.vue';
import { IRewardRow } from './utils/interface';

import { formParams, setPrizeFormParams } from './utils/paramsManager';
import { ref, reactive, watch } from 'vue';

const emit = defineEmits(['submit']);

const props = defineProps({
    type: {
        type: String,
        default: 'FISSION_DRAINAGE'
    },
    /** 进行中、结束的情况下禁用 */
    formDisabled: {
        type: Boolean,
        default: false
    },
    /**  */
    periodType: {
        type: Number,
        default: 1
    },
    activityTime: {
        type: Array,
        default: () => []
    }
});

/**
 * @desc 奖品弹窗ref实例化
 */

const prizeFromDialogRef = ref();

/**
 * 编辑奖品列表的数据
 * @param row 奖品数据信息
 */
const editReward = (row: IRewardRow, index: number) => {
    prizeFromDialogRef.value.open(row, index, 'edit');
};

/**
 * 删除奖品列表的数据
 * @param row 奖品数据信息
 */
const delReward = (index: number) => {
    formParams.reward_list.splice(index, 1);
    emit('submit', formParams.reward_list);
};

/**
 * 打开添加奖品弹窗
 */
const openAddReward = () => {
    prizeFromDialogRef.value.open();
};

/**
 * 查看奖品弹窗
 */
const viewReward = (row: IRewardRow, index?: number) => {
    prizeFromDialogRef.value.open(row, index, 'view');
};

/**
 * 奖品弹窗确认提交
 */
const handleSubmitPrize = (data: IRewardRow, index: number) => {
    formParams.reward_list[index] = data;
    emit('submit', formParams.reward_list);
};

const setFormParams = (data: any) => {
    setPrizeFormParams(data);
};

watch(
    () => props.periodType,
    val => {
        formParams.period_type = val;
    }
);

watch(
    () => props.activityTime,
    val => {
        formParams.activity_time = val;
    }
);

defineExpose({
    setFormParams
});
</script>
<style lang="scss" scoped></style>
